<template>
  <div>
    <!-- $store.state.模块名.字段名 -->
    <!-- {{$store.state.user.token}}
    {{$store.state.setting.appName}} -->
    <!-- 或者利用最外层的 getters 来快速获取 -->
    <!-- {{$store.getters.token}}
    {{$store.getters.appName}} -->
    <!-- 还可以进一步用 mapGetters 来进行获取 -->
    {{token}} <br>
    {{appName}}
    <br>
    <button @click="login">登录</button>
  </div>
</template>

<script>
import {mapGetters, createNamespacedHelpers} from 'vuex'
// createNamespacedHelpers('user') 可以创建出属于当前模块的辅助函数
// 是一个对象, 里面包含了 mapGetters, mapState, mapMutations
// 想用哪个自己解构即可
const {mapMutations} = createNamespacedHelpers('user')
export default {
  computed: {
    ...mapGetters(['token','appName'])
  },
  methods: {
    // 因为现在已经是子模块的命名空间了, 所以用全局的富足函数实现不了
    // 需要使用专属于该命名空间的辅助函数
    // 利用 createNamespacedHelper
    ...mapMutations(['setUserInfo']),
    login() {
      this.setUserInfo('嘿嘿嘿')
    }
  }
}
</script>

<style>

</style>